<template>
    <view class="page">
        <view class="tabBar">
            <view class="left">
                <i class="iconfont icon-home" :class="{ active: curTab == 1 }" @click="changeTab(1)"></i>
                <view><i class="iconfont icon-cart" @click="changeTab(2)"></i>
                    <u-badge :offset="['0.8rem', '16.8rem']" absolute max="99" :value="cartNum"></u-badge>
                </view>
                <view>
                    <i class="iconfont icon-liaotian" :class="{ active: curTab == 3 }" @click="changeTab(3)">
                    </i>
                    <u-badge :offset="['0.8rem', '12.6rem']" absolute max="99" :value="num"></u-badge>
                </view>
                <i class="iconfont icon-mine1" :class="{ active: curTab == 4 }" @click="changeTab(4)"></i>
            </view>
            <u-modal :show="showModal" title="手动录入" @close="closeModal" :showConfirmButton="false"
                :closeOnClickOverlay="true" @confirm="closeModal">
                <view class="modalContent">
                    <span class="contentText">
                        请输入13或10位的ISBN码
                    </span>
                    <u-image class="image" height="7rem" width="10rem"
                        src="http://182.61.31.180:5000/images/1654480301565_ISBN.png"></u-image>

                    <view class="bottom">
                        <u-input placeholder="在这里输入..." v-model="ISBN"></u-input>
                        <u-button shape="circle" @click="addISBN">确定</u-button>
                    </view>
                </view>
            </u-modal>
            <view class="right">
                <i class="iconfont icon-add" @click="add"
                    :class="{ Rotate2: show == true, Rotate1: show == false && showAddAnimate }"></i>

                <u-overlay :show="show" @click="cancel">
                    <!-- <view class="test"></view> -->
                    <view class="hiddenFunction animate__animated "
                        :class="showAnimate ? 'animate__bounceInRight' : ' animate__bounceOutRight'">

                        <view class="item" @click="goEntryBooks">
                            <i class="iconfont icon-iconfontzhizuobiaozhun023121"></i>
                            手动录入
                        </view>
                        <view class="item" @click="scanCode">
                            <i class="iconfont icon-erweima"></i>
                            扫码卖书
                        </view>
                    </view>
                </u-overlay>

            </view>
        </view>
    </view>
</template>

<script>

import { mapGetters } from 'vuex'
export default {
    name: 'TabBar',
    props: {
        tabIndex: {
            type: Number,
            default: 1
        },
        messageNum: {
            type: Number,
            default: 0
        }
    },
    computed: {
        ...mapGetters(['cartNum']),
    },
    beforeUpdate() {
        if (this.$Route.query.tabIndex != undefined) {
            this.curTab = this.$Route.query.tabIndex
        }
    },
    data() {
        return {
            ISBN: '',
            showModal: false,
            show: false,
            showAnimate: false,
            showAddAnimate: false,
            curTab: this.tabIndex,
            num: this.messageNum,
            addIndex: null,
            router: [
                'home',
                'cart',
                'chat',
                'mine'
            ]
        }
    },
    methods: {
        closeModal() {
            this.showModal = false
        },
        goEntryBooks() {
            this.showModal = true;
            // this.$Router.push({
            //     name: 'entryBooks'
            // })
        },
        // 校验十位ISBN
        checkTenISBN(isbn) {
            let result = 0
            for (let index in isbn) {
                result += parseInt(isbn[index]) * isbn.length - index
            }
            if (result % 11 == 0)
                return true
            else {
                this.ISBN = ''
                this.$tools.toast('无效的ISBN码', 'bottom')
                return false
            }
        },
        // 校验13位ISBN
        checkThirteenISBN(isbn) {
            let result = 0
            for (let index = 0; index < isbn.length; index++) {
                result += (index + 1) % 2 == 0 ? parseInt(isbn[index]) * 3 : parseInt(isbn[index]) * 1
            }
            if (result % 10 == 0)
                return true;
            else {
                this.ISBN = ''
                this.$tools.toast('无效的ISBN码', 'bottom')
                return false
            }
        },
        // 录入ISBN码
        addISBN() {
            let isbn = this.ISBN.replace('-', '')
            // 校验当前ISBN合法性
            if (isbn.length == 10) {
                if (this.checkTenISBN(isbn)) {
                    this.searchBookByISBN(isbn)
                }
            } else if (isbn.length == 13) {
                if (this.checkThirteenISBN(isbn)) {
                    this.searchBookByISBN(isbn)
                }
            } else {
                this.ISBN = ''
                this.$tools.toast('无效的ISBN码', 'bottom')
            }
        },
        // 打开二维码扫描
        scanCode() {
            uni.scanCode({
                success: (res) => {
                    this.ISBN = res.result
                    this.addISBN()
                },
            })
        },
        async searchBookByISBN(isbn) {
            uni.showLoading({
                title: '正在查询'
            });
            try {
                await this.$store.dispatch('searchBookByISBN', isbn)
                uni.hideLoading();
                this.$tools.toast('查找成功')
                this.closeModal()
                this.$Router.push({
                    name: 'entryBooks'
                })
            } catch (error) {
                this.$tools.toast('查找失败')
                this.closeModal()
            }
        },
        cancel() {
            this.showAnimate = false
            setTimeout(() => {
                this.show = false
            }, 300)
        },
        add() {
            this.showAnimate = true
            this.showAddAnimate = true
            this.show = true
        },
        changeTab(index) {
            //将原来的tabIndex保存起来再跳转
            let tabIndex = this.curTab
            this.curTab = index;
            if (index == 2) {
                this.$Router.push({
                    name: this.router[index - 1],
                    params: {
                        tabIndex: tabIndex
                    }
                })
            } else {
                if(index==4)
				this.$store.dispatch('getUserInfoBook')
                this.$Router.replace({
                    name: this.router[index - 1]
                })
            }
        }
    }

}
</script>

<style lang="scss">
page {
    padding-bottom: 4rem;
    width: 100%;
    height: 100%;
    background-color: $uni-box-bg-color;

    .page {

        width: 100%;
        height: 100%;

        .tabBar {
            width: 100%;
            margin-bottom: -0.05rem;
            height: 4rem;
            border-top-left-radius: 2rem;
            background-image: url('@/static/images/tabBar.png');
            background-size: 100% 100%;
            background-position: center;
            position: fixed;
            bottom: 0;
            display: flex;
            flex-direction: row;
            z-index: 99999;

            .left {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 70%;
                height: 100%;

                .chat {

                    // width: 1.5rem;
                    .num {
                        position: absolute;
                        top: 0.9rem;
                        right: 50%;
                    }
                }

                .iconfont {
                    width: 1.5rem;
                    font-size: 1rem;


                }

                .active {
                    color: $uni-color-theme-9;
                    font-weight: bold;
                }
            }

            .modalContent {
                width: 100%;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;


                .contentText {
                    font-size: 0.8rem;
                    color: black;
                    margin-top: 0.5rem;
                }

                .image {
                    margin-top: 1rem;
                }


                .bottom {
                    margin-top: 2rem;

                    width: 100%;

                    .u-input {
                        border: none;
                        background: rgb(238, 234, 234);
                    }

                    .u-button {
                        margin-top: 1.5rem;
                        width: 50%;
                        background: $uni-color-theme-6;
                        color: #fff;
                    }
                }
            }

            .right {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 30%;
                height: 100%;


                @keyframes rot2 {
                    from {
                        transform: rotate(0deg);
                    }

                    to {
                        transform: rotate(45deg);
                        // transition: all 0.2s;
                    }

                }

                @keyframes rot1 {
                    from {
                        transform: rotate(45deg);
                    }

                    to {
                        transform: rotate(0deg);
                        // transition: all 0.2s;

                    }

                }

                .Rotate1 {
                    animation: rot1 0.3s;

                }

                .Rotate2 {

                    animation: rot2 0.3s;
                    transform: rotate(45deg);

                }

                .icon-add {
                    font-size: 4rem;
                    color: $uni-color-theme-6;
                    margin-bottom: 4rem;
                }

                .hiddenFunction {
                    position: absolute;
                    bottom: 7rem;
                    right: 2rem;

                    // top: -7rem;
                    .item {
                        font-size: 1.5rem;
                        border-radius: 1rem;
                        margin-top: 1rem;
                        background: #fff;
                        padding: 0.7rem;

                        i {
                            font-size: 1.5rem;
                            margin-right: 0.5em;
                        }
                    }
                }
            }
        }

        .footer {
            text-align: center;
            width: 100vw;
            height: 3rem;
            // background-color: red;
            margin-bottom: 4rem;
            font-size: 1rem;
            color: #ccc;
        }

    }

}
</style>